<template>
  <div id="app" ref="reflayoutContainercontainer"></div>
  <router-view/>
</template>

<script>
import {
  Layout as LayoutDHX, TreeCollection,
  Toolbar as ToolbarDHX,
} from 'dhx-suite-package';
import { Message } from '@/components/message';
import { mapState, mapActions } from 'vuex';

export default {
  name: 'NavigatorBase',
  data: () => ({
    // 0. Frame
    layoutContainer: null,
    // 1. Navigator
    toolbarNavi: null,
    datatoolbarNavi: new TreeCollection(),
  }),
  mounted() {
    this.init();
  },
  computed: mapState({
    userInfo: (state) => state.userModule.userInfo,
  }),
  watch: {
    userInfo(newUserInfo) {
      if (newUserInfo == null) { // 用户退出
        this.toolbarNavi.show(['register', 'login']);
        this.toolbarNavi.hide('user');
      } else {
        this.toolbarNavi.hide(['register', 'login']);
        this.toolbarNavi.show('user');
        this.toolbarNavi.data.update('user', JSON.parse(`{"value": "${newUserInfo.name}"}`));
      }
    },
  },
  methods: {
    ...mapActions('userModule', ['logout']),
    init() {
      this.layoutContainer = this.layoutContainer_create(
        this.$refs.reflayoutContainercontainer,
      );
      this.layoutContainer_event();
      this.layoutContainer_reload();

      return this.layoutContainer;
    },
    // 0. Frame
    layoutContainer_create(ref) {
      const mylayout = new LayoutDHX(ref, {
        type: 'none', // separator among different layouts
        cols: [
          {
            rows: [
              { id: 'toolbarNavi' },
            ],
          },
        ],
      });
      return mylayout;
    },
    layoutContainer_event() {},
    layoutContainer_reload() {
      // 1. Navigator
      this.toolbarNavi = this.toolbarNavi_create();
      this.toolbarNavi_event();
      this.toolbarNavi_reload();

      // mount
      this.layoutContainer.getCell('toolbarNavi').attach(this.toolbarNavi);
    },

    // 1. Navigator
    toolbarNavi_create() { // initialize
      const mytoolbar = new ToolbarDHX(null, {
        css: 'toolbar_navigator_style',
        data: this.datatoolbarNavi,
      });
      return mytoolbar;
    },
    toolbarNavi_event() { // event handler
      this.toolbarNavi.events.on('click', (id) => {
        console.log(id);
        switch (id) {
          case 'profile':
            this.$router.replace({ name: 'profile' });
            break;
          case 'logout':
            this.logout().then(() => {
              Message('退出成功');
              this.$router.replace({ name: 'login' }); // 跳转登录页
            }).catch(() => {
              Message('退出失败');
            });
            break;
          default: break;
        }
      });
    },
    toolbarNavi_reload() { // reload
      const that = this;
      const toolbardata = [
        {
          type: 'customHTML',
          html: '<h1 style="color: #1a202c" class="logo">eQUANTUM</h1>',
        },
        { type: 'spacer' },
        {
          type: 'customHTML',
          html: '<nav class="nav_links"><ul><li><a href="/">首页</a></li></ul></nav>',
        },
        {
          type: 'customHTML',
          html: '<nav class="nav_links"><ul><li><a href="/learn">教学</a></li></ul></nav>',
        },
        {
          type: 'customHTML',
          html: '<nav class="nav_links"><ul><li><a href="/composer">实验</a></li></ul></nav>',
        },
        {
          type: 'customHTML',
          html: '<nav class="nav_links"><ul><li><a href="/download">下载</a></li></ul></nav>',
        },
        {
          id: 'register',
          type: 'customHTML',
          html: '<a href="/register"><button class="nav_btns">注册</button></a>',
          hidden: this.userInfo != null,
        },
        {
          id: 'login',
          type: 'customHTML',
          html: '<a href="/login"><button class="nav_btns">登录</button></a>',
          hidden: this.userInfo != null,
        },
        {
          id: 'user',
          value: this.userInfo != null ? this.userInfo.name : 0,
          hidden: this.userInfo == null,
          items: [
            { // TODO：账号设置
              id: 'profile',
              value: '账号信息',
            },
            { type: 'separator' },
            {
              id: 'logout',
              value: '登出',
            },
          ],
        },
      ];
      that.datatoolbarNavi.parse(toolbardata);
    },
  },
};
</script>

<style>
  @import "dhx-suite-package/codebase/suite.min.css";
  body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
  }
  .nav_links ul {
    list-style-type: none;
    padding: 0;
  }
  .nav_links a {
    font-weight: 550;
    font-size: 15px;
    color: #1a202c;
    text-decoration: none;
    transition: all 0.3s ease 0s;
  }
  .toolbar_navigator_style {
    background-color: #e6e6e6;
  }
  .logo {
    cursor: pointer;
    margin-right: auto;
    margin-left: 5px;
  }
  .nav_links {
    list-style: none;
  }
  .nav_links li {
    display: inline-block;
    padding: 0px 20px;
  }
  .nav_links li a {
    transition: all 0.3s ease 0s;
  }
  .nav_links li a:hover {
    color: #aaaaaa;
  }
  .nav_btns {
    width: 70px;
    height: 30px;
    border: none;
    border-radius: 15px;
    background: #1a202c;
    cursor: pointer;
    /* font */
    font-weight: 550;
    font-size: 15px;
    color: #e6e6e6;
    transition: all 0.3s ease 0s;
  }
  .nav_btns:hover {
    background: #6d6d6d;
  }
  /* 消息窗口 */
  .message_style {
    width: 250px;
    height: 180px;
  }
  /* 图表 */
  .chart_style {
    margin: 40px;
  }
  .tab_style button .dhx_button__text {
    display: inline-block;
    transform: translateY(-13%);
    /* margin-left: -100px; */
  }
  .toolbar_style {
    transform: translateY(-18%);
  }
  .toolbar_btn_style button {
    width: 80px;
    height: 26px;
    font-size: 14px;
  }
  .unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width:500px;
    height:600px;
  }
</style>
